<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../static/dist/css/mynav.css">
    <link rel="stylesheet" href="../static/dist/css/personal_pay_order_details.css">
</head>
<body>
<div class="container-fluid " >
    <div class="row">
        <nav class="navbar navbar-expand-md fixed-top" role="navigation">
            <div class="container container-lk">
                <div class="navbar-header">
                    <a class="navbar-brand" href="home.html"><img src="../static/dist/img/logo2.jpg" alt=""></a>
                    <button class="navbar-btn dropdown-toggle" onclick="pop()">
                        <i style="font-size:24px;color: white" class="fa">
                            &#xf0c9
                        </i>
                        <p>菜单</p>
                    </button>
                </div>
                <div id="sid" class="sidebar">
                    <button onclick="remove()"><img src="../static/dist/img/delete.png" alt=""></button>
                </div>


                <div class="input-group navbar-left">
                    <!--                    <span class="input-group-addon dropdown">-->
                    <!--                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
                    <!--                                所有 <b class="caret"></b>-->
                    <!--                            </a>-->
                    <!--                            <ul class="dropdown-menu">-->
                    <!--                                <li><a href="#">所有</a></li>-->
                    <!--                                <li><a href="#">类型</a></li>-->
                    <!--                                <li class="divider"></li>-->
                    <!--                                <li><a href="#">设置</a></li>-->
                    <!--                                <li class="divider"></li>-->
                    <!--                                <li><a href="#">退出登录</a></li>-->
                    <!--                            </ul>-->
                    <!--                    </span>-->
                    <input type="text" class="form-control" placeholder="请输入要搜索的内容" aria-label="Amount (to the nearest dollar)">
                    <span class="input-group-addon btn btn-primary"><i class="fa fa-search"></i></span>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right " onmouseout="leave()">
                        <li><a href="home.html">首页</a></li>
                        <li><a href="#">电影</a></li>
                        <li><a href="#">榜单</a></li>
                        <li><a href="login.html" >登录|注册</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                我的 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" style="background-color: #080E1C">
                                <li><a href="personal.html">个人中心</a></li>
                                <li><a href="personal_order.html">我的订单</a></li>
                                <li class="divider"></li>
                                <li><a href="personal_settings.html">设置</a></li>
                                <li class="divider"></li>
                                <li><a href="#">退出登录</a></li>
                            </ul>
                        </li>
                        <li>
                            <img class="picture" src="../static/dist/img/30.jpg">
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>



<div class="container-fluid" style="width: 80%;margin: 80px auto;height: 800px;">
    <div class="row">

        <div class="top">
            <div class="col-md-6">
                <br>
                <br>
                <h2>订单状态：<span style="color: #26ce61;font-weight: bolder">已完成</span></h2>
            </div>
            <div class="col-md-6">
                <br>
                <br>
                <br>
                <p class="time-left">
                    请在
                    <span class="minute">7</span>
                    分钟
                    <span class="second">19</span>秒内完成支付
                </p>
                <p class="tip">超时订单会自动取消，如遇支付问题，请致电第二视界客服：1010-5335</p>
            </div>
        </div>
        <div style="margin-top: 40px;background-color: rgba(0,0,0,0.04)">
            <div class="table-responsive">
                <table class="table">
                    <caption>订单编号：20589283144</caption>
                    <thead>
                    <tr>
                        <th>影片</th>
                        <th>开场时间</th>
                        <th>电影所在厅</th>
                        <th>价格</th>
                        <th>状态</th>
                        <th>座位</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>《海王》</td>
                        <td>1月1号 11:05</td>
                        <td>4D厅</td>
                        <td>￥47</td>
                        <td>已支付</td>
                        <td>7排6座</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="bottom">
            <div class="col-md-10">
                <h3>影城：第二视界</h3>
                <p>地址：凌霄宝殿001号</p>
                <p>电话：123456789</p>
            </div>
            <div class="col-md-2">
                <br>
                <p><a href="personal_order.html">返回上一层</a></p>
                <br>
                <p>总价：<span style="font-size: 28px;color:#f03d37">￥47</span></p>
            </div>
        </div>
    </div>
</div>

<script src="../static/plugins/jquery/jquery.min.js"></script>
<script src="../static/plugins/bootstrap/js/bootstrap.js"></script>
<script src="../static/dist/js/mynav.js"></script>
<style>

</style>
</body>
</html>